<!DOCTYPE html>
<html lang="en">
<script type='text/javascript'
        src='https://s3.amazonaws.com/mturk-public/externalHIT_v1.js'></script>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8'/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://s3.amazonaws.com/mturk-public/bs30/css/bootstrap.min.css" rel="stylesheet"/>

<style>
    body {
        font-family: 'Helvetica', 'Arial', sans-serif;
        color: #444444;
        font-size: 12pt;
        background-color: #FAFAFA;
    }

    mark {
        background-color: #cafad5;
        color: black;
        padding-left: 3px;
        padding-right: 3px;

    }

    ul {
        text-align: left;
        list-style-position: inside;
    }

    textarea {
        font-size: 18px;
        margin: 0 auto;
        display: block;
    }

    #submitButton {
        font-size: 20pt;
        color: white;
        background-color: green;
        border: 2px solid #336600;
        padding: 3px;
    }

    table {
        border-spacing: 5px;
    }

    .Yes {
        padding-left: 3px;
        padding-right: 3px;
        font-weight: bold;
        /*color: white;
        background-color: #3333ff;*/
    }

    .No {
        padding-left: 3px;
        padding-right: 3px;
        font-weight: bold;
        /*color: white;
        background-color: #ff3333;*/
    }

    .coherent{
        padding-left: 3px;
        padding-right: 3px;
        font-weight: bold;
        /* background-color: #ccd9ff; */
    }

    .sent_begin {
        padding-left: 3px;
        padding-right: 3px;
        font-weight: bold;
        /* background-color: #ccffff; */
    }

    .sent_middle {
        padding-left: 3px;
        padding-right: 3px;
        font-weight: bold;
        /* background-color: #d9ffcc; */
    }

    .sent_end {
        padding-left: 3px;
        padding-right: 3px;
        font-weight: bold;
        /* background-color: #fff2cc; */
    }

    .sent_rule {
        padding-left: 3px;
        padding-right: 3px;
        font-weight: bold;
        /*background-color: #ffcccc; */
    }

    .column_header1 {
        padding-left: 3px;
        padding-right: 3px;
        background-color: #b0fac6;
    }

    .column_header2 {
        padding-left: 3px;
        padding-right: 3px;
        background-color: #fad896;
    }

    .bb {
        border-bottom: 2px dotted black;
    }


    /* On mouse-over, add a grey background color */
    .container:hover input ~ .checkmark {
        background-color: #ccc;
    }

    /* When the radio button is checked, add a blue background */
    .container input:checked ~ .checkmark {
        background-color: #2196F3;
    }

    /* Create the indicator (the dot/circle - hidden when not checked) */
    .checkmark:after {
        content: "";
        position: absolute;
        display: none;
    }

    /* Show the indicator (dot/circle) when checked */
    .container input:checked ~ .checkmark:after {
        display: block;
    }

    /* Style the indicator (dot/circle) */
    .container .checkmark:after {
        top: 9px;
        left: 9px;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: white;
    }

    .tt {
    border-bottom: 1px dotted #000;
    text-decoration: none;
    color: purple;
    font-weight: bold;
    }

    .hoverTable{
        width:100%;
        border-collapse:collapse;
    }
    .hoverTable td{
        padding:7px; border:#4e95f4 0.2px solid;
    }
    /* Define the default color for all the table rows */
    .hoverTable tr{
        background: #ffffff;
    }
    /* Define the hover highlight color for the table row */
    .hoverTable tr:hover {
          background-color: #ffff99;
    }

    textarea { resize: none; }
</style>


<script type="text/javascript">
    function init() {
        // fixed terms/phrases for fixed place holders
        var sent_begin  = "Beginning";
        var sent_middle = "Middle";
        var sent_end    = "Ending";
        var question1 = "Select (radio) the <span style=\"color: blue\">most plausible</span> sentence and check (checkbox) <span style=\"color: purple\">all correct sentences</span>.";
        var question2 = "Recognize <span style=\"color: blue;font-weight: bold\"></span>";


        var nameElements = document.getElementsByTagName("span");
        for (var i = 0; i < nameElements.length; i++) {
            if (nameElements[i].className == "sent_begin") {
                nameElements[i].innerText = sent_begin;
            }

            else if (nameElements[i].className == "sent_middle") {
                nameElements[i].innerText = sent_middle;
            }
            else if (nameElements[i].className == "sent_end") {
                nameElements[i].innerText = sent_end;
            }
            else if (nameElements[i].className == "sent_rule") {
                nameElements[i].innerText = sent_rule;
            }
            else if (nameElements[i].className == "question1") {
                nameElements[i].innerHTML = question1;
            }
            else if (nameElements[i].className == "question2") {
                nameElements[i].innerHTML = question2;
            }
        }
        document.getElementById("introduction").style.display = "none";
    }

    //function isValid(){
    //    // write down
    //}

    function toggle() {
        if ((document.getElementById("introduction").style.display) == "block") {
            document.getElementById("introduction").style.display = "none";
        }
        else {
            document.getElementById("introduction").style.display = "block";
        }
    }

    // read when document is ready (like a "main" function)
    $(document).ready(function () {
        console.log("**** run ready function");
        init();
    });

    function disable_field(f) {
        document.getElementById(f).disabled = true;
    }

    function enable_field(f) {
        document.getElementById(f).disabled = false;
    }

    function disable_q() {

        disable_field("social_cs1");
        disable_field("social_cs0");

        disable_field("phys_cs1");
        disable_field("phys_cs0");

        disable_field("bio_cs1");
        disable_field("bio_cs0");

        disable_field("world_cs1");
        disable_field("world_cs0");

        disable_field("temporal1");
        disable_field("temporal0");

        disable_field("location1");
        disable_field("location0");

        disable_field("agentaction1");
        disable_field("agentaction0");


    }

    function enable_q() {
        enable_field("social_cs1");
        enable_field("social_cs0");

        enable_field("phys_cs1");
        enable_field("phys_cs0");

        enable_field("bio_cs1");
        enable_field("bio_cs0");

        enable_field("world_cs1");
        enable_field("world_cs0");

        enable_field("temporal1");
        enable_field("temporal0");

        enable_field("location1");
        enable_field("location0");

        enable_field("agentaction1");
        enable_field("agentaction0");
    }

</script>

<form name='mturk_form' method='post' id='mturk_form' action='/mturk/externalSubmit' onsubmit="return isValid()">
    <input type='hidden' value='' name='assignmentId' id='assignmentId'/>
    <div class="container">
        <h1 align="center">Compare plausibility of multiple stories.</h1>

        <h3 align="center">Welcome and thank you for your participation.</h3>
        <h2 align="left"><u>Instructions and Examples</u><a href="javascript:toggle();" id="displaytext" style="font-size: 70%; color: red";> (<b>Expand / Collapse</b>)</a></h2>
        <div id="introduction" style="width:1000px; margin:0 auto;">
            <p>In this HIT, you will be shown a short 3-sentence story. For the <span class="sent_middle">middle</span> sentence, there will be <strong>5 options</strong>. There are two parts to the task.</p>
            <p>The task requires you to:
            <ol>
            <li>
                Pick the middle sentence which makes the <span class="more_plausible">most plausible</span> story
            </li>
            <li>
                Check <stron>all middle</stron> options that form plausible stories.
            </li>

        </ol>



            <h2 align="left"><u>Examples</u></h2>
            The most plausible middle sentence is in bold and each option is marked as correct/incorrect.
            <h4>1</h4>
            <div id="examples" class="examples" style="width:1024px; margin:0 auto; display:block;">
                <table class="table table-bordered">
                    <!--Table head-->
                    <thead>
                    <tr>
                        <th class="col-md-3"><span class="sent_begin"></span></th>
                        <th class="col-md-3"><span class="sent_middle"></span></th>
                        <th class="col-md-3"><span class="sent_end"></span></th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <!-- beginning -->
                        <td rowspan="5" style="vertical-align:middle;">
                            Rob wanted a Sega Genesis.
                        </td>
                        <td style="border-bottom:2px dashed gray;">1: Rob sold one to Dan for $20 <br/><font color="red">(INCORRECT)</font></td>

                        <!-- ending -->
                        <td rowspan="5" style="vertical-align:middle;">Dan hated to see Rob sad so he paid the $20.</td>
                    </tr>
                    <tr>
                        <td><b>2: Rob couldn't afford one, however.</b><br/><font color="green">(CORRECT)</font> / <font color="blue">(BEST)</font> </td>
                    </tr>
                    <tr>
                        <td>3: Rob wanted to play tennis with Dan.<br/><font color="red">(INCORRECT)</font></td>
                    </tr>
                    <tr>
                        <td>4: Rob did not know where to find one.<br/><font color="green">(CORRECT)</font></td>
                    </tr>
                    <tr>
                        <td>5: Rob asked Dan for money.<br/><font color="green">(CORRECT)</font></td>
                    </tr>

                    </tbody>
                </table>

                <hr/>

                <h4>2</h4>
                <table class="table table-bordered">
                    <!--Table head-->
                    <thead>
                    <tr>
                        <th class="col-md-3"><span class="sent_begin"></span></th>
                        <th class="col-md-3"><span class="sent_middle"></span></th>
                        <th class="col-md-3"><span class="sent_end"></span></th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <!-- beggining -->
                        <td rowspan="5" style="vertical-align:middle;">
                            Amy got a flat tire on the way home from work.
                        </td>
                        <td style="border-bottom:2px dashed gray;">1: Amy called someone to fix the flat tire.<br/><font color="green">(CORRECT)</font></td>

                        <!-- ending -->
                        <td rowspan="5" style="vertical-align:middle;">Amy drove away, happy there were still good samaritans in the world.</td>
                    </tr>
                    <tr>
                        <td>2: A few people drove-by and saw her broken down.<br/><font color="red">(INCORRECT)</font></td>
                    </tr>
                    <tr>
                        <td>3: Amy's brother told her how to replace the tire.<br/><font color="red">(INCORRECT)</font></td>
                    </tr>
                    <tr>
                        <td><b>4: A passerby stopped and helped her change tires.</b><br/><font color="green">(CORRECT) / <font color="blue">(BEST)</font></font></td>
                    </tr>
                    <tr>
                        <td>5: Amy did not have a spare tire.<br/><font color="red">(INCORRECT)</font></td>
                    </tr>


                    </tbody>
                </table>



                <hr/>
                Great! You are now ready to start the following questions!
            </div>
        </div>


        <br/><br/>

        <mark>NOTE: </mark><font color="black">Please make sure you read the ending too, not just the beginning and the middle sentences.</font>
        <br/>
        <br/>
<!--        <h2 align="center" style="color: red">Please read instructions again if you have not seen this symbol before:-->
<!--            <span style="color: black; font-size: 50px">♔</span></h2>-->
        <h2 align="left"><u>Your Task</u></h2>
        <div style="width:1024px; margin:0 auto;" >

            <div style="position: -webkit-sticky; position: sticky; top: 0; background-color: white; padding: 10px;">
                <strong></strong> <span class="question1"></span>
                <table class="table table-bordered">
                    <!--Table head-->
                    <thead>
                    <tr>
                        <th class="col-md-3" rowspan="2" align="center"><span class="sent_begin"></span></th>
                        <th class="col-md-3" colspan="2"><span class="sent_middle"></span></th>
                        <th class="col-md-3" rowspan="2"><span class="sent_end"></span></th>
                    </tr>
                    <tr>
                        <th><font color="blue">Select Most Plausible</font></th>
                        <th><font color="purple">Check all correct</font></th>
                    </tr>
                    </thead>
                    <!--Table head-->
                    <!--Table body-->
                    <tbody>
                    <tr>
                        <!-- beginning -->
                        <td rowspan="6" style="vertical-align:middle;">
                            ${obs1}
                        </td>
                        <td style="border-bottom:2px dashed gray;">

                            <label class="radio-inline">
                                <input type="radio" name="Answer_radios" id="Answer_radios1" value="1" required onclick="enable_q()" >
                                1: ${hyp1}
                            </label>
                        </td>
                        <td style="border-bottom:2px dashed gray;">
                            <label class="checkbox-inline" align="right">
                                <input type="checkbox" name="Answer_checks" id="Answer_check1" value="1" required onclick="enable_q()" >
                            </label>
                        </td>

                        <!-- ending -->
                        <td rowspan="6" style="vertical-align:middle;">
                            ${obs2}
                        </td>
                    </tr>
                    <tr>
                        <td  style="border-bottom:2px dashed gray;">
                            <label class="radio-inline">
                                <input type="radio" name="Answer_radios" id="Answer_radios2" value="2" onclick="enable_q()" >
                                2: ${hyp2}
                            </label>
                        </td>
                        <td style="border-bottom:2px dashed gray;">
                            <label class="checkbox-inline" align="right">
                                <input type="checkbox" name="Answer_checks" id="Answer_check2" value="2" required onclick="enable_q()" >
                            </label>
                        </td>
                    </tr>
                    <tr>
                        <td  style="border-bottom:2px dashed gray;">
                            <label class="radio-inline">
                                <input type="radio" name="Answer_radios" id="Answer_radios3" value="3" onclick="enable_q()" >
                                3: ${hyp3}
                            </label>
                        </td>
                        <td style="border-bottom:2px dashed gray;">
                            <label class="checkbox-inline" align="right">
                                <input type="checkbox" name="Answer_checks" id="Answer_check3" value="3" required onclick="enable_q()" >
                            </label>
                        </td>
                    </tr>
                    <tr>
                        <td  style="border-bottom:2px dashed gray;">
                            <label class="radio-inline">
                                <input type="radio" name="Answer_radios" id="Answer_radios4" value="4" onclick="enable_q()" >
                                4: ${hyp4}
                            </label>
                        </td>
                        <td style="border-bottom:2px dashed gray;">
                            <label class="checkbox-inline" align="right">
                                <input type="checkbox" name="Answer_checks" id="Answer_check4" value="4" required onclick="enable_q()" >
                            </label>
                        </td>
                    </tr>
                    <tr>
                        <td  style="border-bottom:2px dashed gray;">
                            <label class="radio-inline">
                                <input type="radio" name="Answer_radios" id="Answer_radios5" value="5" onclick="enable_q()" >
                                5: ${hyp5}
                            </label>
                        </td>
                        <td style="border-bottom:2px dashed gray;">
                            <label class="checkbox-inline" align="right">
                                <input type="checkbox" name="Answer_checks" id="Answer_check5" value="5" required onclick="enable_q()" >
                            </label>
                        </td>
                    </tr>
<!--
                    <tr>
                        <td>
                            <label class="radio-inline" >
                                <input type="radio" name="Answer_radios" id="Answer_radios1" value="-1" required onclick="disable_q()" >
                                6: None of the above <br/><span style="font-size: 12px"><i>(if none of the middle sentences make sense)</i></span>
                            </label>
                        </td>
                        <td>
                        </td>
                    </tr>
-->
                    </tbody>
                </table>

                <hr/>

                <p><span>Comments and feedback (This is optional. Please leave a comment if you have any questions, find issues, etc.)</span>
                </p>
                <span><textarea class="form-control" cols="120" name="Comments" rows="5"></textarea></span>
                <br/>
                <input type="hidden" id="story_id" name="story_id" value="${story_id}">
                <!--<input type="hidden" id="label" name="label" value="${label}">-->


                <p align="center">
                    <input type='submit' id='submitButton' value='Submit'/>
                </p>

            </div>

        </div>

        <hr/>

</form>
<script language='Javascript'>turkSetAssignmentID();</script>


<body>

</body>
</html>